<template>
	<view>
		<view class="distribution">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view style="color: #666666;font-size: 13px;margin-top: 20px;">
					您有租房合同待填写
				</view>
				<view style="margin-top: 20px;">
					<button style="font-size: 11px;" @click="signature">
						签名
					</button>
				</view>
			</view>
			<view style="display: flex;justify-content: center;">
				<image src="http://1.95.83.198:8080/profile/avatar/2024/11/18/230b5a561954c2ac8edaa52d4360caa5.png"
					mode="heightFix" style="height: 140px;"></image>
			</view>
			<view class="">
				<button style="background-color: #FFDA00;font-size: 13px;width: 80px;margin-bottom: 10px;"
					@click="loadContract('https://www.gzxwsz.com/profile/upload/%E5%A4%9A%E6%96%B9%E5%88%86%E8%B4%A6%E5%90%88%E5%90%8C.pdf')">查看合同</button>
			</view>
			<view style="color: #999999;font-size: 11px;text-align: center;margin-top: 70px;">
				本合同以国家《民法典》和市场监督管理总局《商品房屋租赁管理办法》为准拟订，合法合理，公平公正
			</view>
			<u-popup :show="show" @close="close" @open="open" closeable='true'>
				<view>
					<view style="text-align: center; margin-top: 20px;font-size: 14px;">
						签名
					</view>
					<view style="margin-top: 20px;padding:0 5px;">
						<view style="display: flex;justify-content: center;border: #FFDA00 2px solid;">
							<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
								boundingBox='true' backgroundColor='#F5F5F5' :openSmooth="openSmooth"></l-signature>
						</view>
					</view>
					<view style="display: flex;margin-top: 30px;margin-bottom: 10px;">
						<button style="width: 40vw;font-size: 14px;background-color: #ffffff;"
							@click="onClick('clear')">重新填写</button>
						<button style="width: 40vw;font-size: 14px;background-color: #FFDA00;"
							@click="onClick('save')">提 交</button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		urlHead
	} from "@/serve/serve.js" // 全局配置文件
	import {
		get,
		post
	} from "@/serve/method.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	onLoad((option) => {
		tenter.value = JSON.parse(option.id)
		console.log(tenter.value, 8888888888888)
	})
	const tenter = ref({})
	const action = ref(urlHead + '/common/upload')
	const show = ref(false);
	const signature = () => {
		console.log('签名')
		show.value = true
	}
	const close = () => {
		show.value = false;
		console.log(88888, '关闭')
		onClick('clear')
	}
	// 以下是签名
	const penSize = ref('5')
	const penColor = ref('red')
	const openSmooth = ref(true)
	const signatureRef = ref()
	const onClick = (type) => {
		if (type == 'openSmooth') {
			openSmooth.value = !openSmooth.value
			return
		}
		if (type == 'save') {
			signatureRef.value.canvasToTempFilePath({
				success: (res) => {
					// 是否为空画板 无签名
					console.log(res)
					uploadFilePromise(res.tempFilePath)
					// 生成图片的临时路径
					// H5 生成的是base64
					// this.url = res.tempFilePath
				}
			})
			return
		}
		if (signatureRef.value)
			signatureRef.value[type]()
	}
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: action.value,
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (resone) => {
					uni.showModal({
						title: '温馨提示',
						content: '签名完成，是否确定签署合同',
						success: function(restwo) {
							if (restwo.confirm) {
								let one = JSON.parse(resone.data).url
								tenter.value.signDate = one
								let url = '/api/feild/edit'
								post(url, tenter.value).then((resthree) => {
									if (resthree.code == 0) {
										console.log("合同签订成功")
										uni.redirectTo({
											url: '/pages/mine/succer/succer?id=3'
										});
									}
								})
								setTimeout(() => {
									resolve(JSON.parse(resone.data).url);
								}, 1000);
							} else if (restwo.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				},
			});
		});
	}
	// 查看合同
	const loadContract = (fileUrl) => { //fileUrl为请求后端合同或者文档的地址
		if (fileUrl == '') {
			uni.showToast({
				icon: 'none',
				title: '合同生成中',
			})
			return
		}
		console.log(fileUrl);
		uni.downloadFile({
			url: fileUrl,
			success: function(res) {
				var filePath = res.tempFilePath;
				uni.openDocument({
					filePath: filePath,
					fileType: 'pdf',
					showMenu: true,
					success: function(res) {
						console.log('打开文档成功');
					},
					fail: function(err) {
						console.log(err.errMsg);
						uni.showModal({
							title: '打开文档_fail',
							content: err.errMsg + fileUrl,
						})
					},
				});
			},
			fail: function(err) {
				uni.showModal({
					title: '下载文档_fail',
					content: err.errMsg + fileUrl,
				})
			},
		});
	}
</script>

<style scoped lang="scss">
	.distribution {
		width: calc(92vw - 16px);
		margin: 0 auto;
		background-color: #ffffff;
		padding: 13px 8px;
		border-radius: 10px;

		.ones {
			background-color: #F5E8E2;
		}

		.twos {
			background-color: #E6F0F1;
		}

		.threes {
			background-color: #E7EEF6;
		}
	}
</style>